import React, { useEffect, useState } from 'react';

import StepList from '@/pages/SalaryManage/components/StepList';
import SalaryOverviewWrapper from '@/pages/SalaryManage/components/SalaryOverviewWrapper';
import ArticleWagesModal from '@/pages/SalaryManage/SalaryCalculate/Recheck/components/ArticleWagesModal';
import { wrapRecheck } from '@/pages/SalaryManage/utils/pageWrapUtil';
import { fetchOrganizationListAndDefault } from '@/pages/SalaryManage/utils';
import salaryStyle from '@/pages/SalaryManage/salaryManage.less';

const OverviewRecheck = wrapRecheck(props => {
    const {
        sharePeriod,
        shareOrganizationCode,
        rowKey,
        period,
        dispatch,
        dispatchType,
        searchModel,
        articleWagesVisible,
        articleWagesPower,
        articleWagesMsg,
        dataSource = [],
        footerSource = [],
        tableLoading,
        stepLoading,
        checkButtonList = []
    } = props;
    const [organizationTreeData, setOrganizationTreeData] = useState({});

    useEffect(() => {
        const resetInit = async () => {
            dispatch({
                type: dispatchType.reset,
                payload: {
                    organizationCode: shareOrganizationCode
                }
            });
            const {
                organizationResponse: response,
                defaultOrganizationCode: defaultSelectCode
            } = await fetchOrganizationListAndDefault(shareOrganizationCode);
            setOrganizationTreeData(response);
            if (shareOrganizationCode !== defaultSelectCode) {
                dispatch({
                    type: dispatchType.sharedState,
                    payload: {
                        shareOrganizationCode: defaultSelectCode,
                        sharePeriod: undefined
                    }
                })
                dispatch({
                    type: dispatchType.reset,
                    payload: {
                        organizationCode: defaultSelectCode
                    }
                });
            }
        };
        resetInit().then(() => {
            dispatch({
                type: dispatchType.initType,
                payload: sharePeriod
            });
        });
    }, []);

    return (
        <div className={salaryStyle.salaryWrapper}>
            {/* <Spin spinning={loading.global && !tableLoading}> */}
            <StepList
                period={period}
                loading={stepLoading}
                organizationCode={searchModel?.organizationCode}
            />
            <SalaryOverviewWrapper
                period={period}
                dispatch={dispatch}
                dispatchType={dispatchType}
                checkButtonList={checkButtonList}
                dataSource={dataSource}
                footerSource={footerSource}
                tableLoading={tableLoading}
                searchModel={searchModel}
                rowKey={rowKey}
                organizationList={organizationTreeData}
                />
            <ArticleWagesModal
                dispatchType={dispatchType}
                dispatch={dispatch}
                msg={articleWagesMsg}
                modalVisible={articleWagesVisible}
                power={articleWagesPower}
                />
            {/* </Spin> */}
        </div>
    );
});

export { OverviewRecheck };
